<!--
  * 车牌新增
  *
-->
<template>
  <a-modal :title="form.id ? '编辑' : '添加'" :width="500" v-model:visible="visible"  @ok="onSubmit">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 7 }">
      <a-form-item label="车辆属性" name="carCode">
        <!-- <a-input v-model:value="form.carCode" placeholder="请输入车辆识别码" />
          -->
          <a-select
            v-model:value="form.carCode"
                style="width: 100%"
                placeholder="请选择"
                :options="[{value:'单位',label:'单位'},{value:'个人',label:'个人'}]"
          >
          </a-select>
      </a-form-item>
      <!-- <a-form-item label="车牌" name="carPlate">
        <a-input v-model:value="form.carPlate" placeholder="请输入车牌" />
      </a-form-item> -->
      <a-form-item label="归属单位/个人名称" name="cmpName">
        <a-input v-model:value="form.cmpName" placeholder="请输入归属单位/个人名称" />
      </a-form-item>
      <a-form-item label="车辆类型" name="carType">
          <a-select
              v-model:value="form.carType"
              style="width: 100%"
              placeholder="Tags Mode"
              :options="[{value:'卡车',label:'卡车'},{value:'小轿车',label:'小轿车'},{value:'面包车',label:'面包车'}]"
          >
          </a-select>
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="form.status">
          <a-radio :value="0">不可通行</a-radio>
          <a-radio :value="1">可通行</a-radio>
          <a-radio :value="2">识别码报废</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="通行识别码" name="tag">
          <a-input v-model:value="form.tag" placeholder="请输入通行识别码" />
      </a-form-item>
      <a-form-item label="车辆通行开始时间" name="start">
        <a-date-picker show-time placeholder="请选择时间" v-model:value="form.start" valueFormat="YYYY-MM-DD HH:mm:ss"  />
      </a-form-item>
      <a-form-item label="车辆通行结束时间" name="end">
        <a-date-picker show-time placeholder="请选择时间" v-model:value="form.end" valueFormat="YYYY-MM-DD HH:mm:ss" />
      </a-form-item>
    </a-form>
    </a-modal>
  <!-- <a-drawer :title="form.id ? '编辑' : '添加'" :width="500" :open="visible" :body-style="{ paddingBottom: '80px' }" @close="onClose">
    <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }">
      <a-form-item label="车辆识别码" name="carCode">
        <a-input v-model:value="form.carCode" placeholder="请输入车辆识别码" />
      </a-form-item>
      <a-form-item label="车牌" name="carPlate">
        <a-input v-model:value="form.carPlate" placeholder="请输入车牌" />
      </a-form-item>
      <a-form-item label="公司名称" name="cmpName">
        <a-input v-model:value="form.cmpName" placeholder="请输入公司名称" />
      </a-form-item>
      <a-form-item label="车辆类型" name="carType">
          <a-select
              v-model:value="form.carType"
              style="width: 100%"
              placeholder="Tags Mode"
              :options="[{value:'0',label:'卡车'},{value:'1',label:'小轿车'},{value:'2',label:'面包车'}]"
          >
          </a-select>
      </a-form-item>
      <a-form-item label="状态" name="status">
        <a-radio-group v-model:value="form.status">
          <a-radio :value="0">不可通行</a-radio>
          <a-radio :value="1">可通行</a-radio>
          <a-radio :value="2">识别码报废</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="通行识别码" name="tag">
          <a-input v-model:value="form.tag" placeholder="请输入通行识别码" />
      </a-form-item>
    </a-form>
    <div
      :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'right',
        zIndex: 1,
      }"
    >
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="onSubmit">提交</a-button>
    </div>
  </a-drawer> -->
</template>
<script setup>
  import { ref, nextTick, reactive } from 'vue';
  import CategoryTree from '/@/components/business/category-tree-select/index.vue';
  import { CATEGORY_TYPE_ENUM } from '/@/constants/business/erp/category-const';
  import { message } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { GOODS_STATUS_ENUM } from '/@/constants/business/erp/goods-const';
  import _ from 'lodash';
  import { goodsApi } from '/@/api/business/goods/goods-api';
  import { smartSentry } from '/@/lib/smart-sentry';
  import SmartEnumSelect from '/@/components/framework/smart-enum-select/index.vue';
  import DictSelect from '/@/components/support/dict-select/index.vue';
   import {plateNumberApi} from '/@/api/licensePlate/transit/plateNumber'
   import moment from 'moment';

  // emit
  const emit = defineEmits(['reloadList']);

  // 组件ref
  const formRef = ref();

  const formDefault = {
    //车辆识别码
    carCode: undefined,
    //车牌
    // carPlate: undefined,
  //公司名称
    cmpName:'',
  //   车辆类型
    carType:'小轿车',
  //   状态
    status:0,
  //   通行识别码
    tag:'',
    start:moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
      end:''
  };
  let form = reactive({ ...formDefault });
  const rules = {
      carCode: [{ required: true, message: '请输入车辆识别码' }],
      // carPlate: [{ required: true, message: '请输入车牌' }],
      cmpName: [{ required: true, message: '请输入公司名称' }],
      tag: [{ required: true, message: '请输入通行识别码' }],
      carType: [{ required: true, message: '请选择车辆类型' }],
      start: [{ required: true, message: '请选择时间' }],
      end: [{ required: true, message: '请选择时间' }],
  };
  // 是否展示抽屉
  const visible = ref(false);

  function showDrawer(rowData) {
    Object.assign(form, formDefault);
    if (rowData && !_.isEmpty(rowData)) {
      Object.assign(form, rowData);
    }
    if (form.place && form.place.length > 0) {
      form.place = form.place.map((e) => e.valueCode);
    }
    visible.value = true;
    nextTick(() => {
      formRef.value.clearValidate();
    });
  }

  function onClose() {
    Object.assign(form, formDefault);
    visible.value = false;
  }

  function onSubmit() {
    formRef.value
      .validate()
      .then(async () => {
        SmartLoading.show();
        try {
          if (form.id) {
            await plateNumberApi.update(form);
          } else {
            await plateNumberApi.add(form);
          }
          message.success(`${form.id ? '修改' : '添加'}成功`);
          onClose();
          emit('reloadList');
        } catch (error) {
          smartSentry.captureError(error);
        } finally {
          SmartLoading.hide();
        }
      })
      .catch((error) => {
        console.log('error', error);
        message.error('参数验证错误，请仔细填写表单数据!');
      });
  }

  defineExpose({
    showDrawer,
  });
</script>
